<template>
  <el-container v-shortkey="{ handler: asideControlsFn }">
    <el-aside :style="{ width: asideControlsStatus && dirPath ? '263px' : '63px' }"
      style="display: flex;background-color: #002b36;">
      <aside-template />
      <aside-menu-template v-if="asideControlsStatus && dirPath" />
    </el-aside>
    <el-container>
      <el-main style="padding: 0;text-align: left;">
        <vmdEditorTemplate v-if="dirPath" />
        <EmtyTemlplate v-else />
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup lang="ts">
import vmdEditorTemplate from './components/vmdEditor.vue';
import { ref } from 'vue';
import AsideTemplate from './components/aside.vue';
import AsideMenuTemplate from './components/asideMenu.vue';
import EmtyTemlplate from './components/emty.vue';
import useFileStore from '@/store/file';
import { storeToRefs } from 'pinia';
import { ElMessageBox, Action } from 'element-plus';

const fileStore = useFileStore();

const { dirPath } = storeToRefs(fileStore);

const { fileOn } = window.electronApi;

// 监听通信
fileOn(function (event: any, message: any) {
  const { type, data } = message;
  if (type === 'error') {
    ElMessageBox.alert(data || '操作错误', '错误提示', {
      showConfirmButton: false,
      closeOnClickModal: true,
      // modal: false,
      callback: (action: Action) => {

      },
    })
  }

})

// 左侧控制台状态
const asideControlsStatus = ref(true);
// 控制左侧控制台的开合
const asideControlsFn = (event: Event) => {
  // @ts-ignore
  if (event.ctrlKey && event.keyCode === 66) {
    asideControlsStatus.value = !asideControlsStatus.value;
  }
}




</script>

<style scoped></style>